<template>
  <div class="dashboard-container">
    <cat />
    <div class="dashboard-text">name: {{ name }}==={{ visibleFlag }}</div>
    <input type="button" value="按钮" @click="btnHandle">
    <!-- <dia :visible.sync="visibleFlag" @cancel="visibleFlag = false" /> -->
    <dia :visible.sync="visibleFlag">御剑乘风来,除魔天地间!====dia===vue </dia>

    <hr>
    <el-button @click="btn">使用addRoutes来实现动态路由</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dia from './dia.vue'
export default {
  name: 'Dashboard',
  components: {
    dia
  },
  data() {
    return {
      visibleFlag: false
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    console.log(this, 777)
  },
  methods: {
    btnHandle() {
      // alert(1111)
      this.visibleFlag = !this.visibleFlag
    },

    btn() {
      // 动态路由添加
      /*
      addRoutes===可以动态追加路由规则，规则也是可以正常生效访问的
      但是：规则中不会显示出刚刚追加的动态规则

      */
      this.$router.addRoutes([
        {
          path: '/qq1',
          component: () => import('./qq1.vue')
        }
      ])
      console.log(this, 666555)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
